Processing for Androidを試してみました。【8日目】
Processing for Androidを試してみました。
Processingは、ビジュアルデザインのためのプログラミング言語で 統合開発環境です。基本はJavaの文法をそのまま利用できるそうです。 Processing wiki 私は、Android版を試したのですが、他の言語にも対応していて JavaScriptなどもできます。
■開発環境
Androidアプリ開発環境が整った状態でProcessingをインストールするだけです。 Processingは公式サイトより自分の環境にあったものをダウンロードします。
■Processingを起動
ダウンロードしたフォルダの中にあるprocessing.exeで Processingを起動します。
↑起動画面が好きです。
初回はJavaモードの画面で立ち上がるので、Androidモードに切り替えます。 切り替えは、画面のメニューの右下にあるJAVAボタンを選択すると 対応しているモードのボタンが表示されるので、ANDROIDボタンを選択します。 Androidモードになると画面の色が緑っぽく切り替わります。 初回時にAndroidのSDKの場所をきかれるので入力します。
スケッチ
Processingでは、コードを書いて実行して画面に表示させることを スケッチといいます。まずは、チュートリアルにあったコードをみながら四角を書いてみました。
[JAVA] void setup(){ size(displayWidth, displayHeight); noStroke(); fill(255); rectMode(CENTER); }
void draw(){ background(#666666); rect(width/2, height/2, 50, 50); } [/JAVA]
実行は、メニュー[Sketch]からします。 実機で実行する場合はRun on Device エミュレータで実行する場合は、Run in Emulatorを選択します。 エミュレータで実行する場合は、メニュー[Android]から Android AVD Managerを選択してAVD管理画面からProcessing用の エミュレータを起動します。
おお。四角が。でも四角じゃなんかつまらないな…。何かただの四角以外のものをということで、 Android版ではないJava版のチュートリアルのコードをほんの少しかえて実行してみました。クリックしてそのままドラッグすると次にマウスアップされるまで丸がどんどん増えます。
[JAVA] void setup() { size(displayWidth, displayHeight); }
void draw() { if (mousePressed) { fill(222); } else { fill(0); } ellipse(mouseX, mouseY, 50, 50); } [/JAVA]
おお。なんかきもちわるいものになったけどたのしいです。次は、マウスに丸がくっつくようなコードです。
[JAVA] float sw, sh, touchX, touchY;
void setup() { size(displayWidth, displayHeight); sw = displayWidth; sh = displayHeight; }
void draw() { background(0); smooth(); fill(255); ellipse(touchX, touchY, 50, 50); }
void mouseDragged() { touchX = mouseX; touchY = mouseY; } [/JAVA]
まだほんのさわりですが動くと面白いです。
まとめ
Processingはずいぶん前からあるのですが、 Processingで作られたものの見た目がすごくきれい(？ちょっとこわい)為、 どんな複雑なプログラムを？と思っていたので実際試したことはなかったのですが 入り口はとってもわかりやすいものでした。面白いライブラリもたくさん用意されているようなので試してみたいです。
